<template>
    <view class="nav" :class='isFixed == "true" ? "fixed" :""'>
       <view :style='{height: navH + "px"}'>
            <view class="nav_bg" :class='isWhite'>
                <view class='nav-title' :style="{marginTop: n + 'px'}">
                    <view class="nav_bt">
                        <view v-if="isShowBack=='true'" class="click_box" @click='_goBack(navBack)'>
                            <view class="fanhui" ></view>
                        </view>
                        <view v-if="isShowHome=='true'" class="click_box" @click="goHome()">
                            <view class="toHome"></view>
                        </view>
                    </view>  
                    <image v-if="isWhite == 'bg-green'" class="nav_text" src="http://img1.birdback.org/a/87/ce/87cecf0505a9af4a7c6a8d0f56003cba.png"></image>
                    <image v-else-if="isWhite == 'bg-red'" class="nav_text" src="http://img1.birdback.org/a/94/be/94be8c9d46a21db8513e14587e8667ce.png"></image>
                    <image v-else-if="isWhite == 'bg-red-gradient'" class="nav_text" src="http://img1.birdback.org/a/45/55/4555b8af7751a00a8d896b06423bd3b1.png"></image>
                    <view v-else class="nav_text ellipsis" :style='{ opacity: opacity }'>{{innerTitle}}</view>
                    
                </view>
            </view>
            
        </view> 
        <view class="nav-tip" v-if="navTip != ''" :class='isWhite'>{{navTip}}</view>
      <!--  <canvas v-if="navTip != ''" class="nav-tip" :class='isWhite' canvas-id="firstCanvas">{{navTip}}</canvas> -->
    </view>
</template>

<script>
	export default {
		name: "top-nav",
		props: {
			innerTitle: {
				type: String,
				value: '头部标题'
			},
			isShowBack: {
				type: String,
				value: "true"
			},
			isShowHome: {
				type: String,
				value: "false"
			},
			isFixed: {
				type: String,
				value: "true"
			},
			isWhite: {
				type: String,
				value: "bg-white"
			},
			n: {
				type: Number,
				value: getApp().globalData.n
			},
			navH: {
				type: Number,
				value: getApp().globalData.navHeight
			},
			a: {
				type: Number,
				value: 0 
			},
            navTip: {
				type: String,
				value: ''
			},
            opacity: {
				type: Number,
				default: 1 
			},
            navBack: {
				type: Number,
				value: 1 
			},
            pagesURL:{
				type: String,
				value: ''
			},
		},
		data() {
			return {
				// navH: getApp().globalData.navHeight, 
				// n: getApp().globalData.n
			}
		},
        onReady: function (e) {
                var context = uni.createCanvasContext('firstCanvas',this)
        
                context.lineWidth = 10;   
                      
                context.beginPath();
                context.arc(100, 100, 50, 0, Math.PI/2 , true);
                context.strokeStyle = '#0f0';
                context.stroke();
                context.beginPath();
                context.arc(100, 100, 50, 0, Math.PI/2 , false);
                context.strokeStyle = '#444';
                context.stroke();
        },
		onLoad() {
			console.log(getApp().globalData.navHeight);
		},
        
		methods:{
			_goBack: function (n) {
                if(this.pagesURL == 'orderInfo'){
                    uni.switchTab({
                    	url: '/pages/order/index'
                    });
                }else{
                    uni.navigateBack({
                        delta:n
                    });
                }
				
			},
			goHome: function () {
				var schoolId = getApp().globalData.schoolId || 0;
				uni.switchTab({
					url: '/pages/index/index'
				});
			},
            canvasIdErrorCallback: function (e) {
                console.error(e.detail.errMsg)
            }
			
		}
	}
</script>

<style lang="scss" scoped>
	// @import '../../static/iconfont/stylesheet.css';
</style>
<style>
.nav.fixed{
    position: fixed;
    z-index:9999;
}
.nav{
  width: 100%;
  overflow: hidden;
  z-index: 9999;
 
}
.nav_bg{
    width: 100%;
    height: 100%;
    display:flex;
    align-items:center;
    justify-content:center;
}
.bang{
    position: relative;
}
.bang .nav-title{
    position:absolute;
    bottom:10px;
}

.nav-title{
  width: 100%;
  text-align: center;
  font-family:PingFang-SC-Medium;
  font-size: 38rpx;
  position: relative;
}
.nav-title .nav_text{
    width:50%;
    margin:0 auto;
    height: 56rpx;
    display: inline-block;
}
.nav_bt{
  display: flex;
  position:absolute;
  height:56rpx;
  align-items:center;
  justify-content:center;
  left:24rpx;
  width:auto;
}
.nav_bt .click_box{
    display: flex;
    align-items:center;
    justify-content:center;
    padding-right:100rpx;
    height: 100%;
}
.nav_bt .click_box view{
    display: inline-block;
}
.toHome{  
    width:34rpx;
    height: 32rpx;
}
.fanhui{
    width:18rpx;
    height: 32rpx; 
}
.nav .slice_text{
  height: 30rpx;
  width:1px; 
  background: rgba(151, 151, 151,.25);
 
}
.bg-white{
  background-color: #ffffff;
}
.bg-green{
  background:linear-gradient(to right, #0F8658, #1DB18D);
}
.bg-red{
  background:#EA2118;
}
.bg-red-gradient{
  background:linear-gradient(to right, #FF6C1D, #FF4444);
}
.bg-white .nav-title{
  color: #333;
}
.bg-white .fanhui{
  background: url("http://img1.birdback.org/a/c9/1d/c91ddb5ca3566b662d55df33df596471.png");
  background-size: 100% 100%;
}
.bg-white .toHome{
  background: url("http://img1.birdback.org/a/73/a7/73a71da7a5aa222fb294f3d9e63323fd.png");
  background-size: 100% 100%;
}

.bg-gray{
  background-color: #333333;
}
.bg-red .nav-title,.bg-green .nav-title,.bg-gray .nav-title{
  color: #fff;
}
.bg-red .nav-title .nav_text,.bg-green .nav-title .nav_text,.bg-red-gradient .nav-title .nav_text{
    width: 208rpx;
    height: 46rpx;
    /* background: url(http://img1.birdback.org/a/94/be/94be8c9d46a21db8513e14587e8667ce.png) no-repeat;
    font-size: 52rpx;
    font-weight: 300; */
}

/* .bg-gray .nav_bt{
    background:rgba(0,0,0,.25);
} */

.bg-red .fanhui,.bg-green .fanhui,.bg-gray .fanhui,.bg-red-gradient .fanhui{
  background: url("http://img1.birdback.org/a/b6/ec/b6ecce13771716bc6c4ea4849486a793.png") no-repeat;
  background-size: 100% 100%;
}
.bg-red .toHome,.bg-green .toHome,.bg-gray .toHome,.bg-red-gradient .toHome{
  background: url("http://img1.birdback.org/a/e9/91/e99139d2fe6b2bd31bdd3d9f944298b9.png") no-repeat;
  background-size: 100% 100%;
}
.ellipsis{
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
}
.nav-tip{
    color: rgba(255,255,255,.7);
    font-size:24rpx;
    height: 60rpx;
    width: 110%;
    text-align: center;
    border-radius: 0 0 90% 90%;
    margin-left: -5%;
}
</style>
